
<template>
<div id="viewuser">   

    <!--这是大图的弹出框-->
       <el-dialog
        title="查看大图"
        :visible.sync="updateTag2"
        :close-on-click-modal="false" top="50px"
        
     >

           

      <el-image
      style="height: 700px;width:900px;"
      :src="$imgHost+bigimga"
      fit="fill"
     >
      </el-image>

            

      

        <span slot="footer" class="dialog-footer">
            <el-button  type="pamary" @click="updateTag2=false">关闭</el-button>
            
        </span>
        </el-dialog>


         





        <!--这是编辑的弹出框-->
       <el-dialog
        title="请填写修改的信息"
        :visible.sync="updateTag1"
        :close-on-click-modal="false" top="50px">

        <el-form lalel-width="100px"
        >
        
        
            <el-form-item label="楼栋名称" >
                <el-input v-model="UpdateUser.storeyname" autocomplete="off"></el-input>
            </el-form-item>


             <el-form-item label="详细地址" >
                <el-input v-model="UpdateUser.storeyaddress" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="楼层层数">
                <el-input v-model="UpdateUser.storeyfloor" ></el-input>
            </el-form-item>


             <el-form-item label="是否启用">
                <el-radio-group v-model="UpdateUser.storeystatus">
                    <el-radio label="启用">启用</el-radio>
                    <el-radio label="禁用">禁用</el-radio>
                </el-radio-group>
            </el-form-item>

              

            

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="no()">取 消</el-button>
            <el-button type="primary" @click="change()">确 定</el-button>
        </span>
        </el-dialog>


<!--这是内容-->


  <div style="margin-left:80px;margin-top:80px;">
  <el-row>
  <el-col :span="4">
    
         <el-input placeholder="请输入楼栋名" v-model="storeyname" style="width:250px;font-size:23px;height:38px;" class="input-with-select">
               
          </el-input> 
          
   
    </el-col>

    <el-col :span="3">
    
        <el-button   type="primary" plain  @click="findUser()">搜索</el-button>
          
   
    </el-col>
    

</el-row>
</div>
   
   <el-row>
    <div style="margin-left:80px">
  <el-table
    :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"
    :data="pagination.records"
    style="width: 1500px;">

    <el-table-column
      label="编号"
      prop="storeyid"
      align="center"
      width="200">
    </el-table-column>

 <el-table-column
      label="楼栋名"
      prop="storeyname"
      align="center"
      width="200">
    </el-table-column>

     <el-table-column
      label="详细地址"
      prop="storeyaddress"
      align="center"
      width="300">
    </el-table-column>

     <el-table-column
      label="楼层层数"
      prop="storeyfloor"
      align="center"
      width="200">
    </el-table-column>

    <el-table-column
      label="平面示意图"
      width="200"
      align="center">
     <template slot-scope="scope">
      
         <el-image
      style="width: 70px; height: 70px"
      :src="$imgHost+scope.row.storeyimg"
      fit="fill"
      @click="bigimg(scope.row.storeyimg)">
      </el-image>

      </template>

    </el-table-column>

     <el-table-column
      label="楼栋状态"
      
      align="center"
     
      width="250">

      <template slot-scope="scope">
              <span v-if="scope.row.storeystatus==='启用'" style="color: green;font-size:21px;">启用</span>
              <span v-else-if="scope.row.storeystatus==='禁用'" style="color: red;font-size:21px;">禁用</span>
      </template>
    </el-table-column>
    <el-table-column label="操作"
    width="150"
    align="center"
   
    >
     <template slot-scope="scope">
        <el-button
          size="mini"
          type="success"
          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        
      </template>
    </el-table-column>
  </el-table>
  </div>
  <div style="margin-left:80px">
  <!--分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-size="pagination.size"
            :page-sizes="[2,3,4,5]"
           
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            style="margin-top:50px;">
        </el-pagination>
        </div>
</el-row>
</div>

</template>
<script>
  export default {
    data() {
      return {
        
        bigimga:'',
        storeyname:'',
        pagination:{},
        updateTag1:false,
        updateTag2:false,

           UpdateUser:{
              storeyid:'',
              storeyname:'',
              storeyaddress:'',
              storeyfloor:'',            
              storeystatus:'',
           },
       
      };
    },
   methods: {
      
       bigimg(img){
             this.updateTag2   =true;

             this.bigimga=img;
             
             console.log(img);
       },


 //pageSize 改变时会触发回调参数每页条数
      handleSizeChange(size) {
                   this.findUser(this.pagination.current,size);	                  
      },
       //currentPage 改变时会触发 回调参数当前页
      handleCurrentChange(page) {

         this.findUser(page,this.pagination.size);
         
          
      },
       findUser(page=1,size=4){
		 		
                      var url="storey/selectstorey";
                      var params=new URLSearchParams();
                      params.append("storeyName",this.storeyname);
                      params.append("current",page);
                      params.append("size",size);
                      this.$axios.post(url,params).then(resp=>{
                      console.log(resp)
                      this.pagination=resp.data;                      
          });
          

		 		  },
          no(){
                this.updateTag1 = false;
                this.findUser();
          },
           //修改资料 
          change(){
                      var url="storey/updatestorey";      
                      this.$axios.post(url,this.UpdateUser).then(resp=>{
                      if(resp.data.tag==false){
                          alert(resp.data.message);
                      }else{
                      this.updateTag1 = false;
                      this.findUser();
                      }

   });
          }
          ,
      //点击修改，弹出框
      handleEdit(index,row){
           this.updateTag1 = true;

          this.UpdateUser =row;
           console.log(this.UpdateUser);

      },

          
     },

  mounted() {
      this.findUser();
    },
  };
</script>

<style>
  .el-row {
    margin-bottom: 20px;
 
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

